<template>
  <div class="title-bar flex h-10 items-center justify-between">
    <!--    <div class="flex select-none items-center text-base text-gray-700"></div>-->
    <!--    <div class="flex items-center space-x-3">-->
    <!--      <button-->
    <!--        class="h-4 w-4 items-center rounded-full bg-red-400 transition-all hover:scale-125"-->
    <!--        @click="close"-->
    <!--      >-->
    <!--        <img src="/icons/close.svg" alt="" class="hidden" />-->
    <!--      </button>-->
    <!--      <button-->
    <!--        class="h-4 w-4 rounded-full bg-yellow-400 transition-all hover:scale-125"-->
    <!--        @click="minimize"-->
    <!--      >-->
    <!--        <img src="/icons/minimize.svg" alt="" class="hidden" />-->
    <!--      </button>-->
    <!--      <button-->
    <!--        class="h-4 w-4 rounded-full bg-green-400 transition-all hover:scale-125"-->
    <!--        :class="windowStatus === 'fullScreen' ? 'hidden' : ''"-->
    <!--        @click="fullScreen"-->
    <!--      >-->
    <!--        <img src="/icons/fullScreen.svg" alt="" class="hidden" />-->
    <!--      </button>-->
    <!--      <button-->
    <!--        class="h-4 w-4 rounded-full bg-green-400 transition-all hover:scale-125"-->
    <!--        :class="windowStatus === 'windowing' ? 'hidden' : ''"-->
    <!--        @click="windowing"-->
    <!--      >-->
    <!--        <img src="/icons/windowing.svg" alt="" class="hidden" />-->
    <!--      </button>-->
    <!--    </div>    -->
    <div class="flex select-none items-center text-base text-gray-700"></div>
    <div class="flex h-full">
      <button class="px-2 hover:bg-gray-200" @click="minimize">
        <svg class="h-8 w-8">
          <use :href="`/icons/titlebar.svg#minimize`"></use>
        </svg>
      </button>
      <button
        class="px-2 hover:bg-gray-200"
        :class="windowStatus === 'fullScreen' ? 'hidden' : ''"
        @click="fullScreen"
      >
        <svg class="h-8 w-8">
          <use :href="`/icons/titlebar.svg#fullScreen`"></use>
        </svg>
      </button>
      <button
        class="px-2 hover:bg-gray-200"
        :class="windowStatus === 'windowing' ? 'hidden' : ''"
        @click="windowing"
      >
        <svg class="h-8 w-8">
          <use :href="`/icons/titlebar.svg#windowing`"></use>
        </svg>
      </button>
      <button
        class="px-[10px] hover:bg-red-500 hover:text-white"
        @click="close"
      >
        <svg class="h-8 w-8">
          <use :href="`/icons/titlebar.svg#close`"></use>
        </svg>
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getCurrentWindow } from '@tauri-apps/api/window'

const appWindow = getCurrentWindow()
let windowStatus = ref('windowing')

function close() {
  appWindow.close()
}

function minimize() {
  appWindow.minimize()
}

function fullScreen() {
  windowStatus.value = 'fullScreen'
  appWindow.maximize()
}

function windowing() {
  windowStatus.value = 'windowing'
  appWindow.unmaximize()
}
</script>

<style scoped>
.title-bar {
  -webkit-app-region: drag;
}
.title-bar button {
  -webkit-app-region: no-drag;
}
</style>
